<div class="box box-primary">
    <div class="box-header with-border">
        <div class="box-title">
            <button type="submit" class="btn btn-primary" (click)="toggleAddModal()">新增</button>
        </div>
    </div>
    <div class="box box-body table-responsive">
        <!-- 查询条件 -->
        <form class="form-inline">
            <div class="form-group ext-from-item">
                <label for="">托管行：</label>
                <input type="text" class="form-control" name="vcBank" id="vcBank" [(ngModel)]="searchBody.bank" placeholder="托管行">
            </div>
            <div class="form-group ext-from-item">
                <label for="">主承商：</label>
                <input type="text" class="form-control" name="vcLeadUnderwriter" id="vcLeadUnderwriter" [(ngModel)]="searchBody.underwriter" placeholder="主承商">
            </div>
            <div class="form-group ext-from-item">
                <button type="submit" class="btn btn-primary" (click)="getBankRefList()">查询</button>
                <button type="submit" class="btn btn-warning" (click)="resetSearch()">重置</button>
            </div>
        </form>
        <!-- 查询条件 END-->
        <!-- 列表-->
        <div class="table-scroll-content">
            <table class="table table-bordered table-keep-line table-hover table-striped pull-right align-center">
                <tr>
                    <th>关联码</th>
                    <th>银行</th>
                    <th>主承商</th>
                    <th>编辑</th>
                </tr>
                <tr *ngFor="let bankRef of bankRefList">
                    <td>{{bankRef.lBankrefNo}}</td>
                    <td>{{bankRef.vcBank}}</td>
                    <td>{{bankRef.vcLeadUnderwriter}}</td>
                    <td>
                        <button type="submit" class="btn btn-primary btn-sm" (click)="toggleUpdateModal(bankRef)">修改</button>
                        <button type="submit" class="btn btn-warning btn-sm" (click)="deleteBankRef(bankRef)">删除</button>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 列表 END-->
        <!-- 分页 Begin -->
        <app-pagination
            [currentPageNum]="pageInfo.currentPageNum"
            [pagesShow]="pageInfo.pagesShow"
            [totalPages]="pageInfo.totalPages"
            (pageChanged)="pageNavigation($event)">
            <div class="pull-left pagination-detail" data-pagination-additional="true">
                <span class="pagination-info">
                    当前显示第{{pageInfo.startRow}}到第{{pageInfo.endRow}}条&nbsp;&nbsp;&nbsp;&nbsp;总共{{pageInfo.total}}条
                </span>
                <span class="page-list">
                    <span class="btn-group dropup">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="page-size">{{pageInfo.pageSize}}</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li *ngFor="let i of pageInfo.pageList" role="menuitem"
                                [class.active]="pageInfo.pageSize === i"
                                (click)="pageSizeChange(i)">
                            <a href="javascript:void(0)">{{i}}</a>
                            </li>
                        </ul>
                    </span> 
                    条记录每一页
                </span>
            </div>
        </app-pagination>
        <!-- 分页 End -->
    </div>
</div>
<!-- 新增关联方信息 Begin -->
<div #modal class="modal fade" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" (click)="closeModal()">×</span></button>
                <h4 class="modal-title">{{isUpdate? '更新关联方信息' : '新增关联方信息'}}</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline">
                    <div class="form-group ext-from-item">
                        <label for="vcBankA">银行：</label>
                        <input type="text" class="form-control" name="vcBankA" id="vcBankA" placeholder="银行" [(ngModel)]="bankRef.vcBank">
                    </div>
                    <div class="form-group ext-from-item">
                        <label for="vcLeadUnderwriterA">主承商：</label>
                        <input type="text" class="form-control" name="vcLeadUnderwriterA" id="vcLeadUnderwriterA" placeholder="主承商" [(ngModel)]="bankRef.vcLeadUnderwriter">
                    </div>
                </form>
            </div> 
            <div class="modal-footer">
                <button *ngIf="!isUpdate" type="button" class="btn btn-primary" (click)="addBankRef()">新增</button>
                <button *ngIf="isUpdate" type="button" class="btn btn-primary" (click)="updateBankRef()">更新</button>
                <button type="button" class="btn btn-default" (click)="closeModal()">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 新增关联方信息 End -->

